import React from 'react';
import {Form, Input, Button, Modal, Message, DatePicker, Icon, Table ,Select, Row, Col } from 'antd';
import LoanModal from './loanModal';
import ReLoanModal from './reLoanModal';
const FormItem = Form.Item;
const Option = Select.Option;

let LoanList = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10
      },
      visible: false,
      visible2: false,
      details: {},
      record: {}
    }
  },

  componentDidMount() {
    this.handleSearch()
  },

  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  fetch() {

    let forms = this.props.form.getFieldsValue();
    let page = this.state.pagination.current;
    let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
    let _me = this
    Utils.sendAjax({
      url: '/loan/apply/findList',
      data: JSON.stringify(params),
      callback: function (result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  getDetail(id){
    let _me = this;
    Utils.sendAjax({
      url: '/loan/apply/findDetail',
      data: JSON.stringify({id: id}),
      callback: function (result) {
        if (result.code == '200') {
          _me.setState({
            details: result.data,
          })
          _me.refs.loanDetails.setFieldsValue(result.data);
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },
  showReLoanModal(record){
    this.setState({
      visible2: true,
      record: record

    })
  },
  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    });
    this.fetch();
  },

  handleReset() {
    this.props.form.resetFields();
  },

  rowKey(data) {
    return data.id;
  },

  showModal(param) {
    this.setState({
      visible: true,
    });
    this.getDetail(param);
  },

  handleCancel() {
    this.setState({
      visible: false,
      visible2: false
    });
  },

  //日期选择框
  onChange(value, dateString) {
    console.log(value, dateString);
  },

  render() {

    const { getFieldProps } = this.props.form;

    const columns = [
      {
        title: '房源地址',
        render: (text, record) => {
          return (<span>{record.address}{record.roomName}</span>)
        }
      },
      {
        title: '借款类型',
        render: (text, record) => {
          let type = {
            101: '收房贷',
            102: '装修贷',
            103: '租约贷',
          }
          return (<span>{type[record.type]}</span>)
        }
      },
      {
        title: '申请借款金额',
        dataIndex: 'applyAmount'
      },
      {
        title: '申请借款期限',
        dataIndex: 'applyPeriod'
      },
      {
        title: '申请时间',
        dataIndex: 'applyTime'
      },
      {
        title: '审批状态',
        render: (text, record) => {
          let statusMap =  {
            '1': '审批通过',
            '-1': '审批不通过',
            '2': '未审批',
          };
          return (<span>{statusMap[record.status]}</span>)
        }
      },
      {
        title: '放款状态',
        render: (text, record) => {
          let loanMap =  {
            '1': '已放款',
            '-1': '拒绝放款',
            '2': '待放款',
            '0': '--',
          };
          return (<span>{loanMap[record.isLoan]}</span>)
        }
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div>
            <a href="javascript:;" onClick={this.showModal.bind(this, record.id)}>查看详情</a>
            {record.status == -1 ? 
              <span>&nbsp;|&nbsp;<a href="javascript:;" onClick={this.showReLoanModal.bind(this, record)}>重新申请</a></span>
            : 
            ''
            }
            </div>
          )
        }
      },
    ];

    const loanChild = {
      visible: this.state.visible,
      details: this.state.details,
      callBack: this.handleCancel
    };
    const reLoanChild = {
      visible: this.state.visible2,
      callBack: this.handleCancel,
      record: this.state.record,
      loanList: this.fetch
    };
    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem label="房源地址">
              <Input {...getFieldProps('address') } placeholder="房源地址"/>
            </FormItem>
            <FormItem label="申请类型">
              <Select {...getFieldProps('type') } placeholder="申请类型" style={{width: 162}}>
                <Option value="101">收房贷</Option>
                <Option value="102">装修贷</Option>
                <Option value="103">租约贷</Option>
              </Select>
            </FormItem>
            <FormItem label="放款状态">
              <Select {...getFieldProps('isLoan') } placeholder="放款状态" style={{width: 162}}>
                <Option value="1">已放款</Option>
                <Option value="-1">拒绝放款</Option>
                <Option value="2">待放款</Option>
              </Select>
            </FormItem>
            <FormItem label="审批状态">
              <Select {...getFieldProps('status') } placeholder="审批状态" style={{width: 162}}>
                <Option value="1">审批通过</Option>
                <Option value="-1">拒绝放款</Option>
                <Option value="2">未审批</Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="primary" onClick={this.handleReset} style={{marginRight: 20}}>重置</Button>
            </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
               onChange={this.handleTableChange}
               pagination={this.state.pagination}/>

        <LoanModal ref="loanDetails" {...loanChild}/>
        <ReLoanModal  {...reLoanChild}/>
      </div>
    );
  }
});


LoanList = Form.create()(LoanList);
export default LoanList